<template>
    <view class="wg-loadmore-wrap">
        <view class="wg-loadmore" v-if="loading">
            <view class="wg-loading"></view>
            <view class="wg-loadmore-tips">正在加载</view>
        </view>

        <view class="wg-loadmore wg-loadmore-line" v-if="!loading && completed">
            <view class="wg-loadmore-tips wg-loadmore-tips-in-line" :style="'background-color:' + lineBg">
                <text>底线到啦</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'txtLoadMore',
        props: {
            loading: Boolean,
            completed: Boolean,
            lineBg: {
                type: String,
                default: '#ffffff'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .wg-loadmore-wrap {
        position: relative;
        width: 100%;
    }

    .wg-loadmore {
        width: 65%;
        margin: 1.5em auto;
        line-height: 1.6em;
        font-size: 24upx;
        text-align: center;
        color: #A0A5AF;
    }

    .wg-loadmore-line {
        border-top: 2upx dashed #A0A5AF;
        margin-top: 2.4em;
    }

    .wg-loadmore-tips {
        display: inline-block;
        vertical-align: middle;
    }

    .wg-loadmore-tips-in-line {
        position: relative;
        top: -.9em;
        padding: 0 0.55em;
        background-color: #ffffff;
        color: #A0A5AF;
    }

    .wg-loading {
        margin: 0 10upx;
        width: 36upx;
        height: 36upx;
        display: inline-block;
        vertical-align: middle;
        animation: loading 1s steps(12, end) infinite;
        background: transparent url("") no-repeat;
        background-size: 100%;
    }

    @keyframes loading {
        0% {
            transform: rotate3d(0, 0, 1, 0deg);
            -webkit-transform: rotate3d(0, 0, 1, 0deg);
        }

        100% {
            transform: rotate3d(0, 0, 1, 360deg);
            -webkit-transform: rotate3d(0, 0, 1, 360deg);
        }
    }
</style>